<template>
	<view class="page">
		<view class="stops" style="margin: 45rpx 0;">
			<u-steps :current="current" direction="row">
				<u-steps-item v-for="(item,index) in auditList" :key="index" :desc="item.createTime">
					<view slot="desc" class="styyyy">{{item.apply}}</view>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="tip">
			*请如实完整填写以下资料，否则会影响您的评估结果
		</view>
		<!-- 		<view class="uploaad" @click="imgShow(form.idCardImg)" v-if="form.idCardImg!=null">
			<img :src="form.idCardImg" alt="" style="width: 100%;height: 100%;">
		</view>
		<view class="uploaad" v-if="form.idCardImg==null">
			<img src="@/static/ke_hu/sfz.jpg" alt="" style="width: 100%;height: 100%;">
		</view> -->
		<view class="items" style="margin-top: 24rpx;">
			<view class="items_left">
				姓名
			</view>
			<view class="items_rght_tips">
				{{form.name}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				身份证号
			</view>
			<view class="items_rght_tips">
				{{form.idCardNumber}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				手机号
			</view>
			<view class="items_rght_tips" @click.stop="$PhoneCall(form.account)">
				{{form.account}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				现住宅地址
			</view>
			<view class="items_rght_tips">
				{{form.address}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				最高学历
			</view>
			<view class="items_rght_tips">
				{{educationTips}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				最高学位
			</view>
			<view class="items_rght_tips">
				{{xueweiTips}}
			</view>
		</view>
		<view class="fenGe"></view>
		<!-- 		<view class="items">
			<view class="items_left">
				是否具有稳定工作
			</view>
			<view class="items_rght_tips">
				{{form.stableWork}}
			</view>
		</view> -->
		<view class="items">
			<view class="items_left">
				工作单位名称
			</view>
			<view class="items_rght_tips">
				{{form.workplace}}
			</view>
		</view>
		<view class="tishi" style="margin: 32rpx 0;">
			*工作单位请参照营业执照或实际单位名字填写，否则会影响审
			批结果
		</view>
		<view class="items">
			<view class="items_left">
				单位座机号
			</view>
			<view class="items_rght_tips">
				{{form.workPhone || ''}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				是否有社保
			</view>
			<view class="items_rght_tips">
				{{sheBao}}
			</view>
		</view>
		<view class="fenGe"></view>
		<!-- 		<view class="items">
			<view class="items_left">
				是否有房贷
			</view>
			<view class="items_rght_tips">
				{{form.mortgage}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				分期用途
			</view>
			<view class="items_rght_tips">
				{{form.stagingUse}}
			</view>
		</view> -->
		<!-- 		<view class="items">
			<view class="items_left">
				购车地
			</view>
			<view class="items_rght_tips">
				{{form.area}}
			</view>
		</view> -->
		<view class="items">
			<view class="items_left">
				经销商
			</view>
			<view class="items_rght_tips">
				{{form.dealerName}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				车型
			</view>
			<view class="items_rght_tips">
				{{form.carTypeNum}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				分期数
			</view>
			<view class="items_rght_tips">
				{{fenqishu}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				官方指导价
			</view>
			<view class="items_rght_tips">
				{{form.carPrice}}
			</view>
		</view>
		<view class="items">
			<view class="items_left">
				分期项目
			</view>
			<view class="items_rght_tips">
				{{xiangmu}}
			</view>
		</view>
		<!-- 		<view class="items">
			<view class="items_left">
				邮箱号
			</view>
			<view class="items_rght_tips">
				{{form.email}}
			</view>
		</view> -->
		<!-- <u-button v-if="showEdit"
			:customStyle="{border:'none',background: '#0079FE',width:'644rpx',color:'#fff',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx',marginTop:'71rpx'}"
			@click="edit">
			编辑
		</u-button> -->
		<u-button v-if="showCancel"
			:customStyle="{border:'none',background: '#fff',width:'644rpx',color:'#9D9D9D',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx',marginTop:'45rpx'}"
			@click="cancelClick">
			取消申请
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				id: null, //订单id
				showEdit: false,
				showCancel: false,
				form: {
					id: '', //申请id
					name: '', //姓名
					idCardNumber: '', //身份证
					phone: '', //新增手机号
					address: '', //新增现住宅地
					workPhone: '', //新增单位座机
					installmentNum: 0, //新增分期数
					idCardImg: null, //身份证照片
					degree: null, //学历
					workplace: '', //工作单位
					stableWork: 1, //是否有稳定工作
					clientUserId: uni.getStorageSync("clientUserId"), //当前登录人ID
					cpfSocialSecurity: 1, //是否有公积金或社保
					mortgage: 1, //房贷
					stagingUse: null, //分期用途
					areaId: null, //购车地
					dealerId: null, //经销商
					cartypeId: '', //车型
					sysUserId: '', //销售人员Id
					backHousehold: 1, //背户
					email: '', //邮箱号
					carPrice: '', //官方指导价
				},
				educationTips: '', //学历
				xueweiTips: '', //学位
				sheBao: '', //社保
				xiangmu: '', //分期项目
				fenqishu: '', //分期数提示
				auditList: [{
						apply: '初审中'
					},
					{
						apply: '初审通过'
					},
					{
						apply: '补充资料'
					},
					{
						apply: '终审中'
					},
					{
						apply: '终审通过'
					},
					{
						apply: '合同签署中'
					},
					{
						apply: '合同签署完成'
					},
					{
						apply: '请款中'
					},
					{
						apply: '已放款'
					},
					{
						apply: '还款中'
					},
					{
						apply: '还款完成'
					}
				], //审核记录
			}
		},
		onLoad(data) {
			this.id = data.installmentId
			this.load()
		},
		methods: {
			matchState(state = '', reg) {
				return !!String(state).match(reg) //返回true/false
			},
			// 编辑
			edit() {
				uni.navigateTo({
					url: '/pages/ke_hu_duan/wo_de_shen_qing/shen_qing_fen_qi?installmentId=' + this.form.id
				})
			},
			// 取消进件
			cancelClick() {
				this.cancel()
			},
			async cancel() {
				uni.showModal({
					title: '提示',
					content: '您确认要取消吗？',
					cancelText: "取消",
					confirmText: "确认",
					confirmColor: '#ef111b',
					cancelColor: '#000000',
					success: function(res) {
						//变量接this
						var that = this
						if (res.confirm) {
							uni.showLoading({
								mask: true
							})
							const res = this.$post(`/biz/wxInstallment/cancelMyInstallment`, {
								id: this.form.id
							}).then(res => {
								if (res.status) {
									this.auditList = res.data.data
									this.$ToastFail('取消成功')
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}, 1000)
								} else {
									this.$ToastFail('取消失败,请重试')
								}
							})
						}
					}.bind(this)
				})
			},
			// 预览图片
			imgShow(path) {
				uni.previewImage({
					urls: [path]
				})
			},
			load() {
				// this.getInstallmentAudit()
				this.getInstallment()
			},
			//获取申请详情
			async getInstallment() {
				//获取练习列表数据
				const res = await this.$post(`/biz/wxInstallment/getMyInstallment`, {
					id: this.id
				})
				this.form = res.data.data
				this.dealerTips = res.data.data.dealerName
				if (this.form.degree == '0') {
					this.educationTips = '研究生'
				} else if (this.form.degree == '1') {
					this.educationTips = '大学本科'
				} else if (this.form.degree == '2') {
					this.educationTips = '大学专科和专科学校'
				} else if (this.form.degree == '3') {
					this.educationTips = '中等专业学校或中等技术学院'
				} else if (this.form.degree == '4') {
					this.educationTips = '高中'
				} else if (this.form.degree == '5') {
					this.educationTips = '初中'
				} else if (this.form.degree == '6') {
					this.educationTips = '小学'
				} else if (this.form.degree == '7') {
					this.educationTips = '文盲或半文盲'
				} else if (this.form.degree == '8') {
					this.educationTips = '技术学校'
				}
				if (this.form.xuewei == '0') {
					this.xueweiTips = '学士'
				} else if (this.form.xuewei == '1') {
					this.xueweiTips = '硕士'
				} else if (this.form.xuewei == '2') {
					this.xueweiTips = '博士'
				} else if (this.form.xuewei == '3') {
					this.xueweiTips = '名誉博士'
				} else if (this.form.xuewei == '4') {
					this.xueweiTips = '其他'
				}
				if (this.form.stagingUse == '0') {
					this.StagingPurposesTips = '买车'
				}
				if (this.form.stagingUse == '1') {
					this.StagingPurposesTips = '买房'
				}
				if (this.form.stagingUse == '2') {
					this.StagingPurposesTips = '其他'
				}
				if (res.data.data.cpfSocialSecurity == 0) {
					this.sheBao = '是'
				} else {
					this.sheBao = '否'
				}
				if (res.data.data.installmentNum == 0) {
					this.fenqishu = '12期'
				} else if (res.data.data.installmentNum == 1) {
					this.fenqishu = '24期'
				} else if (res.data.data.installmentNum == 2) {
					this.fenqishu = '36期'
				}
				if (res.data.data.project == 0) {
					this.xiangmu = '新车'
				} else {
					this.xiangmu = '二手车'
				}
				this.form.backHousehold = parseInt(res.data.data.backHousehold)
				this.form.stableWork = parseInt(res.data.data.stableWork)
				this.form.cpfSocialSecurity = parseInt(res.data.data.cpfSocialSecurity)
				this.form.installmentNum = parseInt(res.data.data.installmentNum)

				this.form.mortgage = parseInt(res.data.data.mortgage)
				if (res.data.data.minPrice == res.data.data.maxPrice) {
					this.form.carPrice = res.data.data.maxPrice
				} else {
					this.form.carPrice = res.data.data.minPrice + "-" + res.data.data.maxPrice
				}
				this.CarTypeTips = res.data.data.carTypeNum
				this.BuyingAcarTips = res.data.data.areaName
				this.workPhone = res.data.data.workPhone
				this.address = res.data.data.address
				this.form.phone = res.data.data.account
				if (this.matchState(res.data.data.applyStatus, /[0]/)) {
					// 0 系统审核中
					this.showEdit = true
				}
				if (this.matchState(res.data.data.applyStatus, /[02356]/)) {
					// 6 待放款 5 终审驳回  3 待终审 2 待补充资料
					this.showCancel = true
				}
				this.getInstallmentAudit(res.data.data)
			},
			//获取审核记录
			getInstallmentAudit(e) {
				if (e.applyStatus == 0 || e.applyStatus == 1 || e.applyStatus == 5) {
					this.current = 0
				}
				if (e.applyStatus == 10) {
					this.current = 1
				}
				if (e.applyStatus == 2 || e.applyStatus == 11 || e.applyStatus == 12) {
					this.current = 2
				}
				if (e.applyStatus == 3 || e.applyStatus == 4) {
					this.current = 3
				}
				if (e.applyStatus == 16) {
					this.current = 5
				}
				if (e.applyStatus == 13 || e.applyStatus == 14 || e.applyStatus == 17 || e.applyStatus == 6) {
					this.current = 7
				}
				if (e.applyStatus == 7) {
					this.current = 8
				}
				if (e.applyStatus == 18) {
					this.current = 9
				}
				if (e.applyStatus == 15) {
					this.current = 11
				}
				if (this.current > 1) {
					this.auditList[1].apply = "【" + e.productName + "】"
				}
			},
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		/* height: 100vh; */
		background-color: #fff;
		padding: 0 30rpx 81rpx;
		box-sizing: border-box;
	}

	.tip {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin-top: 24rpx;
	}

	.uploaad {
		width: 690rpx;
		height: 297rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 32rpx;
	}

	.uploaad {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.icon {
		font-size: 108rpx;
		font-family: 'Rubik-Regular, Rubik';
		font-weight: 400;
		color: #C4C4C4;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.fenGe {
		width: 690rpx;
		height: 15rpx;
		background: #F4F4FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tishi {
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
	}

	.xie_yi {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin: 34rpx 0 76rpx;
	}

	.items_rght_tips {
		font-size: 22rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.styyyy {
		color: #606266;
		font-weight: normal;
		word-wrap: normal;
		font-size: 13px;
		writing-mode: vertical-rl;
		/* 实现文字垂直显示，其中 "rl" 表示从右向左 */
		text-orientation: upright;
		/* 保证文字正立显示 */
	}

	.slot-icon {
		width: 21px;
		height: 30px;
		background-color: $u-warning;
		border-radius: 100px;
		font-size: 20px;
		color: #fff;
		line-height: 30px;
		text-align: center;
	}
</style>